<template>
  <el-dialog v-model="dialogVisible" title="订单详情" width="800">
    <el-table :data="orderDetails" max-height="360">
      <el-table-column label="菜品名称" prop="name" />
      <el-table-column label="菜品图片" width="100px">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="'/api/common/download?name=' + scope.row.image"
            fit="fill"
            :preview-src-list="['/api/common/download?name=' + scope.row.image]"
            :preview-teleported="true"
          />
          <!-- 给el-image 加上 :preview-teleported="true" 解决遮罩层盖不住table的问题  -->
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="number" width="100px" />
      <el-table-column label="口味" prop="dishFlavor" />
      <el-table-column label="单价" prop="amount" width="100px">
        <template #default="subScope">
          &yen;{{ subScope.row.amount / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="合计" prop="amount" width="100px">
        <template #default="subScope">
          &yen;{{ (subScope.row.amount / 100) * subScope.row.number }}
        </template>
      </el-table-column>
    </el-table>
    <el-card style="margin-top: 10px" shadow="never">
      <p><strong>备注：</strong>{{ remark }}</p>
    </el-card>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'OrderDetail'
})

const dialogVisible = ref(false)
// 订单详情
const orderDetails = ref([])
// 订单留言
const remark = ref('')

const open = async (order) => {
  orderDetails.value = order.orderDetails
  remark.value = order.remark
  dialogVisible.value = true
}

defineExpose({
  open
})
</script>

<style scoped></style>
